<template>
	<view>
		<view class="cu-form-group flex flex_between">
			<view class="title">请上传1张人脸照片</view>
			<view @click="faceRecored">历史记录</view>
		</view>
		<view class="block__title"></view>
		<view class="header_photo">
			<view class="picture">
				<view class="uni-uploader__files" style="justify-content: center;">
					<block v-for="(image,index) in imageList" :key="index">
						<view class="uni-uploader__file">
							<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage">
							</image>
						</view>
					</block>
					<view v-if="imageList.length == 0" class="uni-uploader__input-box">
						<view class="uni-uploader__input" @tap="chooseImage">
							<image src="../../static/add.jpg" mode=""></image>
						</view>
					</view>
				</view>
			</view>

			
		</view>
		<view class="notice">
			<view class="block__title">注意事项</view>
			<view class="notice_matters">
				1.确保照片中，无多人人脸头像
			</view>
			<view class="notice_matters">
				2.确保照片五官清晰
			</view>
			<view class="notice_matters">
				3.确保照片不模糊
			</view>

			<view class="notice_footer">
				<view class="">
					正对手机
				</view>
				<view class="">
					光线充足
				</view>
				<view class="">
					放慢动作
				</view>
			</view>
		</view>
		<view class="apply margin-top">
			<button @tap="clear">清空图片</button>
			<button type="primary" @tap="upload">提交审核</button>
		</view>
	</view>
</template>

<script>
	//压缩图片
	function compressImage(imgSrc, success) {
		plus.zip.compressImage({
				src: imgSrc,
				dst: imgSrc + ".jpg",
				quality: 100,
				width: "200px" // 缩小到原来的一半
			},
			function() {
				console.log("success");
				success();
			},
			function(error) {
				console.log("Compress error!");
			});
	}

	function GetBase64Code(path, success) //path绝对路径 
	{
		var bitmap = new plus.nativeObj.Bitmap("test");
		//test标识谁便取 
		// 从本地加载Bitmap图片 
		bitmap.load(path, function() {
			var base4 = bitmap.toBase64Data();
			var datastr = base4.split(',')[1];
			success(datastr);
		}, function(e) {
			console.log('加载图片失败：' + JSON.stringify(e));
		});
	}


	export default {
		data() {
			return {
				imageList: [],
				maxImage: 1,

			}
		},
		onLoad(option) {
			console.log(JSON.stringify(option))
			if (option.cheakFace == 'true') {
				console.log('true');

				uni.navigateTo({
					url: '/pages/success/success'
				})
			}
			if (option.cheakFace == 'false') {
				uni.showToast({
					icon: 'none',
					title: '验证失败'
				})
			}
		},
		methods: {
			faceRecored(){
				uni.navigateTo({
					url:"./faceRecord"
				})
			},
			upload() {
				var that = this;
				if (this.imageList.length > 0) {
					GetBase64Code(this.imageList[0], function(base64) {
						uni.setStorageSync('photo', base64);
						uni.navigateTo({
							url: '../webView/webView'
						})
					});
				} else {
					uni.showToast({
						title: '请上传图片',
						icon: 'none',
						duration: 1000
					})
				}
			},
			previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.imageList
				})
			},
			clear: function() {
				this.imageList = []
			},
			chooseImage: async function() {
				console.log("123")
				if (this.imageList.length === this.maxImage) {
					let isContinue = await this.isFullImg();
					console.log("是否继续?", isContinue);
					if (!isContinue) {
						return;
					}
				}
				uni.chooseImage({
					// sourceType: ['camera'],
					sizeType: ['compressed'],
					count: 1,
					success: (res) => {
						this.imageList = this.imageList.concat(res.tempFilePaths);
						for (var i in this.imageList) {
							var that = this;
							compressImage(this.imageList[i], function() {
								that.imageList[i] += '.jpg';
							});
						}

						console.log(JSON.stringify(res))
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.block__title {
		margin: 0;
		font-weight: 400;
		font-size: 14px;
		color: rgba(69, 90, 100, .6);
		padding: 40rpx 30rpx 20rpx;
	}

	.header_photo {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx 20rpx 40rpx 20rpx;

		.picture {
			width: 200rpx;
			height: 200rpx;
			text-align: center;
			line-height: 150rpx;
			// padding: 20rpx 30rpx;
			background-color: aliceblue;
		}
	}

	.notice {
		height: calc(100vh - 650rpx);
		background-color: aliceblue;
		position: relative;

		.block__title {
			margin: 0;
			font-weight: 400;
			font-size: 28rpx;
			color: rgba(69, 90, 100, .6);
			padding: 40rpx 30rpx 20rpx;
		}

		.notice_matters {
			font-weight: 400;
			font-size: 28rpx;
			color: rgba(69, 90, 100, .6);
			padding: 10rpx 20rpx;
		}

		.notice_footer {
			width: 100%;
			height: 100rpx;
			position: absolute;
			bottom: 0rpx;
			display: flex;
			justify-content: space-around;

		}
	}

	.apply {
		width: 100%;
		height: 100rpx;
		position: absolute;
		bottom: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		button {
			width: 200rpx;
			height: 100rpx;
			border-radius: 60rpx;
		}
	}
	.uni-uploader__file {
		width: 200rpx;
		height: 200rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.uni-uploader__input {
		width: 200rpx;
		height: 200rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	
</style>
